﻿<script type="text/javascript">
    var Page = Page || {};
    //获取密码强度
    Page.Utility = function (password) {
        if (password == null || password == '')
            return 0;
        if (password.length <= 4)
            return 0; //密码太短
        var Modes = 0;
        for (i = 0; i < password.length; i++) {
            Modes |= CharMode(password.charCodeAt(i));
        }
        return bitTotal(Modes);
        //CharMode函数 
        function CharMode(iN) {
            if (iN >= 48 && iN <= 57) //数字
                return 1;
            if (iN >= 65 && iN <= 90) //大写字母
                return 2;
            if (iN >= 97 && iN <= 122) //小写
                return 4;
            else
                return 8; //特殊字符 
        }
        //bitTotal函数
        function bitTotal(num) {
            modes = 0;
            for (i = 0; i < 4; i++) {
                if (num & 1) modes++;
                num >>>= 1;
            }
            return modes;
        }
    };
    var viewModel = {
        Password: ko.observable(""),
        Ocolor: "#eeeeee"
    };
    viewModel.PasswordLevel = ko.dependentObservable(function () {
        return Page.Utility(this.Password());
    }, viewModel);
    viewModel.Lcolor = ko.dependentObservable(function () {
        //根据密码强度判断第一个格显示的背景色
        return this.PasswordLevel() == 0 ? this.Ocolor : (this.PasswordLevel() == 1 ? "#FF0000" : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00"))
    }, viewModel);
    viewModel.Mcolor = ko.dependentObservable(function () {
        //根据密码强度判断第二个格显示的背景色
        return this.PasswordLevel() < 2 ? this.Ocolor : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00")
    }, viewModel);
    viewModel.Hcolor = ko.dependentObservable(function () {
        //根据密码强度判断第二个格显示的背景色
        return this.PasswordLevel() < 3 ? this.Ocolor : "#33CC00"
    }, viewModel);
    $((function () {
        ko.applyBindings(viewModel);
    }));

</script>
<form name="form1" action="">
输入密码:<input type="text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'">
<br>
密码强度:
    <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"
        height="23" style='display: inline'>
        <tr align="center" bgcolor="#eeeeee">
            <td width="50" id="strength_L" data-bind="style: { backgroundColor: Lcolor }">
                弱
            </td>
            <td width="50" id="strength_M" data-bind="style: { backgroundColor: Mcolor }">
                中
            </td>
            <td width="50" id="strength_H" data-bind="style: { backgroundColor: Hcolor }">
                强
            </td>
        </tr>
    </table>
</form>
